<template>
    <view class="box">
        <view class="top">
            <!-- <view class="u-flex u-m-b-30">
                <view class="search u-flex">
                    <image src="../../static/icon/search.png" mode=""></image>
                    <input type="text" v-model="keywords" placeholder="搜索内容" placeholderStyle="color:#aeaeae" @confirm="confirm" />
                </view>
            </view> -->
			<template v-if="data.city">
				<view class="place--title">
				    当前定位
				</view>
				<view class="place u-flex">
				    <view class="list">
				        {{data.city}}
				    </view>
				</view>
			</template>
        </view>
        
        <u-index-list :scrollTop="scrollTop" :index-list="indexList" active-color="#ff4942">
        	<view v-for="(item, index) in data.data" :key="index" >
        		<u-index-anchor :index="item.name" />
        		<view class="list-cell u-border-bottom" v-for="(nitem, nindex) in item.city" :key="nindex"
					@click="choose(nitem, nindex)">
        			{{nitem.name}}
        		</view>
        	</view>
        </u-index-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollTop: 0,
                indexList: '',
				data: [],
				keywords: '',
            }
        },
        onLoad() {
            this.getCity()
        },
        onPageScroll(e) {
        	this.scrollTop = e.scrollTop;
        },
        methods: {
			// 选择城市
			choose(nitem, nindex) {
				console.log(nitem, nindex)
                uni.removeStorageSync('CITY_NAME')
                uni.removeStorageSync('CITY_ID')
                
                if (this.$getSync('userToken')) {
                    this.$ajax('update_city', {
                    	user_token: this.$getSync('userToken'),
                    	city_id: nitem.id,
                    }).then(ret => {
                    	if (ret.success == 1000) {
                            uni.setStorageSync('CITY_NAME', nitem.name)
                            uni.setStorageSync('CITY_ID', nitem.id)
                    		this.$backT()
                    	} else {
                    		this.$toast(ret.msg);
                    	}
                    });
                } else {
                    uni.setStorageSync('CITY_NAME', nitem.name)
                    uni.setStorageSync('CITY_ID', nitem.id)
                    // uni.$emit("CHOOSE_CITY", nitem)
                    this.$backT()
                }
			},
			// 确定搜索
			// confirm() {
			// 	this.getCity()
			// },
			getCity(){
				this.$ajax('select_city', {
					city: '',
				}).then(ret => {
					if (ret.success == 1000) {
						this.data = ret.detail;
						this.indexList = ret.detail.data.map(val => {
							return val.letter;
						})
					} else {
						this.$toast(ret.msg);
					}
				});
			},
		}
    }
</script>

<style lang="scss">
    .top {
        padding: 10rpx 20rpx 0;
    }

    // 搜索
    .search {
        flex: 1;
        height: 66rpx;
        background-color: #fff;
        border-radius: 66rpx;
        background-color: #f5f5f5;
        padding: 0 20rpx;
        overflow: hidden;

        image {
            display: block;
            width: 30rpx;
            height: 30rpx;
            margin-right: 20rpx;
        }

        input {
            flex: 1;
            font-size: 25rpx;
            color: #333;
        }
    }
    
    
    .place--title{
        font-size: 28rpx;
        color: #000000;
        margin-bottom: 25rpx;
    }
    
    .place{
        margin-bottom: 20rpx;
        
        .list{
            min-width: 162rpx;
            font-size: 24rpx;
            color: #ff4942;
            line-height: 60rpx;
            text-align: center;
            background-color: #fffafa;
            border: 1rpx solid #ff4942;
            padding: 0 10rpx;
            margin-bottom: 10rpx;
            margin-right: 10rpx;
        }
        
    }
    
    
    
    .list-cell {
    	display: flex;
    	box-sizing: border-box;
    	width: 100%;
    	padding: 10px 24rpx;
    	overflow: hidden;
    	color: $u-content-color;
    	font-size: 14px;
    	line-height: 24px;
    	background-color: #fff;
    }
</style>
